<template>
    <div class="property" :key="new Date().getTime()">
        <!-- <functional title="属性编辑" icon="fa fa-edit" type="property" options="left" :isFooter="false">
            <el-collapse v-model="activeNames">
                <el-collapse-item v-for="(item, index) in propertyItem" :key="index" :title="`- ${item.label}`" :name="item.id">
                    <editorform :options="item.children" :property="propertyItem" :data="layer"></editorform>
                </el-collapse-item>
            </el-collapse>
        </functional> -->
        <functional title="属性编辑" class="propertyContents" icon="fa fa-edit" type="property" options="left" :isFooter="true" :class="store.coverage ? 'propertyToRight' : ''">
            <el-collapse v-model="activeNames">
                <plot_style :graphic="layer" id="1"></plot_style>
                <!-- 图上文字 -->
                <div v-if="plottingType == 'ordinaryText' || plottingType == 'facadeText' || plottingType == 'rotateText' || plottingType == 'marqueeText'">
                    <!-- 普通文字 -->
                    <ordinaryText :graphic="layer" id="2" v-if="plottingType == 'ordinaryText'"></ordinaryText>
                    <!-- 特殊文字 -->
                    <materialOptions :graphic="layer" id="2" v-else></materialOptions>
                </div>

                <div v-else>
                    <!-- <template> -->
                    <iconoint :graphic="layer" id="2" v-if="plottingType == 'iconPoint'"></iconoint>
                    <!-- 图上线段 -->
                    <segment :graphic="layer" id="2" v-else-if="plottingType == 'segment' || plottingType == 'curve' || plottingType == 'pipeline' || plottingType == 'corridor' || plottingType == 'rail' || plottingType == 'road'"></segment>
                    <!-- 二维平面 -->
                    <twodimensionalsurface
                        :graphic="layer"
                        id="2"
                        v-else-if="plottingType == 'plane' || plottingType == 'rectangle' || plottingType == 'polygon' || plottingType == 'regular' || plottingType == 'circle' || plottingType == 'sector' || plottingType == 'ellipse'"
                    ></twodimensionalsurface>
                    <!-- 三维立体 -->
                    <threedimensional :graphic="layer" id="2" v-else></threedimensional>
                    <!-- </template> -->
                    <labelStyle :graphic="layer" id="3"></labelStyle>
                </div>
                <locationOrShowMsg :graphic="layer" id="4"></locationOrShowMsg>
            </el-collapse>
            <template #footer>
                <div class="submitBtn">
                    <el-button color="#20a0ff" :dark="true" plain size="small" @click="saveEditorDrawData">保存</el-button>
                    <!-- <el-button color="#20a0ff" :dark="true" plain size="small">添加</el-button> -->
                </div>
            </template>
        </functional>
    </div>
</template>
<script setup lang="ts">
// import { isDark } from 'composables/dark'
// import editorform from "./components/editorform.vue";
// 标绘样式
import plot_style from "./components/plot_style.vue";
// 普通文字样式
import ordinaryText from "./components/ordinaryText.vue";
// 位置及显示
import locationOrShowMsg from "./components/locationOrShowMsg.vue";
// 特殊文字样式
import materialOptions from "./components/materialOptions.vue";
// label文字样式
import labelStyle from "./components/labelStyle.vue";
// 图标点
import iconoint from "./components/plotting/iconoint.vue";
// 图上线段
import segment from "./components/plotting/segment.vue";
// 二维平面
import twodimensionalsurface from "./components/plotting/twodimensionalsurface.vue";
// 三维立体
import threedimensional from "./components/plotting/threedimensional.vue";

import { computed, ref, watch, reactive } from "vue";
import storages from "@/utils/storage";
import { useStore } from "@/stores/index1";
import { updateDrawData } from "@/api/draw";
import { ElMessage } from "element-plus";

import { useStoreData } from "@/stores/data";
const storeData = useStoreData();
const store = useStore();

let layer: any = reactive({});
layer = computed(() => {
    return store.graphicLayer.getGraphicById(storages.get("graphicId"));
});

const plottingType: any = ref(layer.value.options.plottingType);
// 默认打开所有选项
const activeNames: any = ref(["1", "2", "3", "4"]);
// 保存修改的标绘数据
const saveEditorDrawData = () => {
    /**
     * 处理要提交的数据
     */
    // 数据转换
    let postData = JSON.parse(JSON.stringify(layer.value.toJSON()));
    postData.style = JSON.stringify(postData.style);
    postData.folderId = postData.folderId[postData.folderId.length - 1];
    if (postData.position) {
        postData.positions = JSON.stringify(postData.position);
        postData.position = JSON.stringify(postData.position);
    } else {
        postData.positions = JSON.stringify(postData.positions);
    }
    postData.id = layer.value.options.id;
    console.log(layer.value);
    console.log(postData);
    // 提交数据
    updateDrawData(postData).then((res) => {
        ElMessage({
            message: "保存成功",
            type: "success",
        });
        // 获取树菜单数据
        let treeNode = (storeData.tree as any).getNode(layer.value.id).data;
        // 更新数据名称
        treeNode.name = postData.name;
        // 判断是否修改文件夹
        if (treeNode.pid != postData.folderId) {
            (storeData.tree as any).remove(layer.value.id);
            // 更新pid
            treeNode.pid = postData.folderId;
            setTimeout(() => {
                (storeData.tree as any).append(treeNode, postData.folderId);
                if (treeNode.show) {
                    (storeData.tree as any).setChecked(layer.value.id, true);
                }
            }, 300);
        }
    });
};
</script>
<style scoped lang="scss">
.propertyContents {
    transition: all 0.2s;
}
.propertyToRight {
    left: 320px;
}
</style>
